<template>
    <el-drawer class="text-sm p-0" v-model="dialog" title="订单详情" size="50%" :destroy-on-close="true">
        <!-- 订单信息-->
        <el-card shadow="never">
            <template #header>
                <div class="card-header">
                    <span>订单信息</span>
                </div>
            </template>
            <div>
                <div>
                    <span class="mr-4 text-gray-400">订单号</span>
                    <span class="text-gray-700">{{item.no}}</span>
                </div>
                <div class="mt-5 mr-2">
                    <span class="mr-4  text-gray-400">付款方式</span>
                    <span class="text-gray-700">{{ item.payment_method }}</span>
                </div>
                <div class="mt-5 mr-2">
                    <span class="mr-4  text-gray-400">付款时间</span>
                    <span class="text-gray-700">{{ item.create_time }}</span>
                </div>
                <div class="mt-5 mr-2">
                    <span class="mr-4  text-gray-400">创建时间</span>
                    <span class="text-gray-700">{{ item.create_time }}</span>
                </div>
            </div>
        </el-card>
        <!-- 发货信息 -->
        <el-card v-if="item.ship_data" shadow="never" class="mt-4">
            <template #header>
                <div class="card-header">
                    <span>发货信息</span>
                </div>
            </template>
            <div>
                <div>
                    <span class="mr-4 text-gray-400">物流公司</span>
                    <span class="text-gray-700"> {{item.ship_data.express_company}} </span>

                </div>
                <div class="mt-5 mr-2">
                    <span class="mr-4  text-gray-400">运单号</span>
                    <span class="text-gray-700"> {{ item.ship_data.express_no }}</span>
                    <el-button text size="default" @click="openGetInfo(item.id)" v-loading="loading">
                        <template #default>
                            <span class="text-blue-400">查看物流</span>
                        </template>
                    </el-button>
                </div>
                <div class="mt-5 mr-2">
                    <span class="mr-4  text-gray-400">发货时间</span>
                    <span class="text-gray-700"> {{ item.ship_data.express_time }} </span>
                </div>
            </div>
        </el-card>
        <!-- 商品信息 -->
        <el-card shadow="never" class="mt-4">
            <template #header>
                <div class="card-header">
                    <span>商品信息</span>
                </div>
            </template>
            <div>
                <div class="flex mt-4" v-for="(item1,index) in item.order_items">
                    <el-image :src="item1.goods_item?.cover" fit="fill" :lazy="true" style="width:64px;height:64px"></el-image>
                    <div class="ml-2" v-if="item1.goods_item">
                        <h6>{{ item1.goods_item.title == null ?  '该商品已被删除' : item1.goods_item.title}}</h6>
                        <div class="flex align-middle mt-2" v-if="item1.goods_skus?.skus">
                            <el-tag class="ml-2" type="info" v-for="(item2,index) in item1.goods_skus.skus" size="small">{{ item2.name }}</el-tag>
                        </div>
                        <div>
                            <span class="text-red-500 font-bold ml-2"> ￥{{ item1.price }} </span>
                            <span>× {{ item1.num }} </span>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-gray-600">成交价</span>
                    <span class="ml-10 text-red-700">￥{{ item.total_price }}</span>
                </div>
            </div>
        </el-card>
        <!-- 收货信息 -->
        <el-card shadow="never" class="mt-4">
            <template #header>
                <div class="card-header">
                    <span>收货信息</span>
                </div>
            </template>
            <div>
                <div>
                    <span class="mr-4 text-gray-400">收货人</span>
                    <span class="text-gray-700">{{item.address.name}}</span>
                </div>
                <div class="mt-5 mr-2">
                    <span class="mr-4  text-gray-400">联系方式</span>
                    <span class="text-gray-700">{{ item.address.phone }}</span>
                </div>
                <div class="mt-5 mr-2">
                    <span class="mr-4  text-gray-400">收货地址</span>
                    <span class="text-gray-700">{{item.address.province}}{{item.address.city}}{{item.address.province}}{{item.address.address}}</span>
                </div>
            </div>
        </el-card>

        <el-card shadow="never" v-if="tab == 'refunding'" class="mt-4">
            <template #header>
                <div class="card-header flex justify-between">
                    <span>退款信息</span>
                    <span class="text-blue-400">已申请，等待审核</span>
                </div>
            </template>
        </el-card>

        <GetInfo ref="getInfoRef" />
    </el-drawer>
</template>

<script setup>
import GetInfo from '~/pages/order/components/GetInfo.vue'
import { ref } from 'vue'
const dialog = ref(false)
const item = ref([])

const getInfoRef = ref(null)
const laoding = ref(false)

const open = (row) => {
    item.value = row
    dialog.value = true
}
const openGetInfo = (id) => {
    getInfoRef.value.open(id)
}

defineProps({
    tab: ''
})

defineExpose({
    open
})
</script>

<style scope>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

el-card:nth-child(1) {
    @apply mt-0 !important;
}
</style>